<!DOCTYPE html>
<html lang="en">

   <head>
      <meta charset="UTF-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
      <title>学生就业统计表</title>
      <link rel="stylesheet" href="./iconfont/iconfont.css">
      <link rel="stylesheet" href="css/index.css"/>
   </head>

   <body>
      <h1>学生就业统计表</h1>
      <form class="info" autocomplete="off">
         <input type="text" class="uname" name="uname" placeholder="姓名"/>
         <input type="text" class="age" name="age" placeholder="年龄"/>
         <input type="text" class="salary" name="salary" placeholder="薪资"/>
         <select name="gender" class="gender">
            <option value="男">男</option>
            <option value="女">女</option>
         </select>
         <select name="city" class="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="曹县">曹县</option>
         </select>
         <button class="add">
            <i class="iconfont icon-tianjia"></i>添加
         </button>
      </form>

      <div class="title">共有数据<span>0</span>条</div>
      <table>
         <thead>
            <tr>
               <th>ID</th>
               <th>姓名</th>
               <th>年龄</th>
               <th>性别</th>
               <th>薪资</th>
               <th>就业城市</th>
               <th>录入时间</th>
               <th>操作</th>
            </tr>
         </thead>
         <tbody>
            <!-- <tr>
              <td>1</td>
              <td>迪丽热巴</td>
              <td>23</td>
              <td>女</td>
              <td>12000</td>
              <td>北京</td>
              <td>2099/9/9 08:08:08</td>
              <td>
                <a href="javascript:">
                  <i class="iconfont icon-shanchu"></i>
                  删除
                </a>
              </td>
            </tr> -->
         </tbody>
      </table>
      <script>
         // 参考数据
         const initData = [
            {
               stuId: 1,
               uname: '迪丽热巴',
               age: 22,
               salary: '12000',
               gender: '女',
               city: '北京',
               time: '2099/9/9 08:08:08'
            }
         ]
         // localStorage.setItem('data', JSON.stringify(initData))
         const arr = JSON.parse(localStorage.getItem('data')) || []
         const tbody = document.querySelector('tbody')

         function render() {
            const trArr = arr.map(function (ele, index) {
               return `
                <tr>
                  <td>${ele.stuId}</td>
                  <td>${ele.uname}</td>
                  <td>${ele.age}</td>
                  <td>${ele.salary}</td>
                  <td>${ele.gender}</td>
                  <td>${ele.city}</td>
                  <td>${ele.time}</td>
                  <td>
                    <a href="javascript:" data-id="${index}">
                      <i class="iconfont icon-shanchu"></i>
                      删除
                    </a>
                  </td>
               </tr>
              `
            })
            console.log(trArr)
            tbody.innerHTML = trArr.join('')
            document.querySelector('.title span').innerHTML = arr.length
         }

         render()
         // 新增业务
         const info = document.querySelector('.info')
         const uname = document.querySelector('.uname')
         const age = document.querySelector('.age')
         const salary = document.querySelector('.salary')
         const gender = document.querySelector('.gender')
         const city = document.querySelector('.city')
         info.addEventListener('submit', function (e) {
            if (!uname.value || !age.value || !salary.value) {
               return alert('请输入完整信息')
            }
            // 关闭页面跳转
            e.preventDefault()
            arr.push({
               stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
               uname: uname.value,
               age: age.value,
               salary: salary.value,
               gender: gender.value,
               city: city.value,
               time: new Date().toLocaleString()
            })
            render()
            localStorage.setItem('data', JSON.stringify(arr))
         })

         // 删除业务
         tbody.addEventListener('click', function (e){
            if (e.target.tagName === 'A'){
               if (confirm('确定删除吗？')){
                  arr.splice(e.target.dataset.id, 1)
               }
            }
            render()
            localStorage.setItem('data', JSON.stringify(arr))
         })
      </script>
   </body>

</html>